import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import { Table, Button, Select, Space, Modal, Form, Input, message } from 'antd';
import axios from '../../../../../http/index'




export default function See(props) {
    const [content, setcontent] = useState({})
    // 表格数据
    const tabeldata = () => {
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/seeCoupon',
            params: {
                currentPage: 1,
                pageSize: 1000,
            }
        })
            .then((res) => {
                console.log('表格数据', res);
                let datas = res.data.data
                for (let i = 0; i < datas.length; i++) {
                    datas[i].key = datas[i].id
                }
                usedatas([...datas])
                console.log('ads', datas);
            })
            .catch((err) => {
                console.log(err);
            })
    }
    useEffect(() => {
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/queryCouponDetailsState',
        })
            .then((res) => {
                console.log('详情', res);
                console.log('来自父组件的数据', props.seedatas);
                let a = { ...res.data.data, ...props.seedatas }
                setcontent(() => (a))
            })
            .catch((err) => {
                console.log(err);
            })

            tabeldata()
    }, []);
    // 表格数据
    const [datas, usedatas] = useState([])

    // 表头
    const columns = [
        {
            title: '优惠码',
            dataIndex: 'discount_code',
            key: 'discount_code',
            align: 'center',
            width: 180,
        },
        {
            title: '领取会员',
            dataIndex: 'receive_member',
            key: 'receive_member',
            align: 'center',
            width: 120,
            ellipsis: true,
        },
        {
            title: '领取方式',
            dataIndex: 'receiving_method',
            key: 'receiving_method',
            align: 'center',
            render(text) {
                return text === 1 ? '主动领取' : '系统赠送'
            }
        },
        {
            title: '领取时间',
            dataIndex: 'collection_time',
            key: 'collection_time',
            align: 'center',
        },
        {
            title: '使用状态',
            dataIndex: 'current_state',
            key: 'current_state',
            align: 'center',
            render(text) {
                return text === 1 ? '未使用' : text === 2 ? '已经领取' : text === 3 ? '已使用' : '未领取'
            }
        },
        {
            title: '使用时间',
            dataIndex: 'usage_time',
            key: 'usage_time',
            align: 'center',
        },
        {
            title: '订单编号',
            dataIndex: 'order_no',
            key: 'order_no',
            align: 'center',
        }
    ];
    // 排序
    const sort = (e) => {
        if (e === '1') {
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/querySortOrder',
                params: {
                    collection_time: '1',
                    usage_time: '',
                }
            })
                .then((res) => {
                    let datas = res.data.data
                    for (let i = 0; i < datas.length; i++) {
                        datas[i].key = datas[i].id
                    }
                    usedatas([...datas])
                    console.log('时间排序', res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                })
        } else {
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/querySortOrder',
                params: {
                    collection_time: '',
                    usage_time: '1',
                }
            })
                .then((res) => {
                    let datas = res.data.data
                    for (let i = 0; i < datas.length; i++) {
                        datas[i].key = datas[i].id
                    }
                    usedatas([...datas])
                    console.log('时间排序', res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                    message.error('排序失败');
                })
        }

    }
    // 搜索框
    const [da, setda] = useState({})
    const ada = () => {
        console.log(da);
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/queryDynamicCouponDetalis',
            params: {
                ...da
            }
        })
            .then((res) => {
                let datas = res.data.data
                for (let i = 0; i < datas.length; i++) {
                    datas[i].key = datas[i].id
                }
                usedatas([...datas])
                message.success('搜索成功');
                console.log('搜索',res);
            })
            .catch((err) => {
                message.success('暂无数据');
                console.log(err);
            })
    }
    const couponName = (e) => {
        if (e.target.value) {
            setda({ ...da, order_no: e.target.value })
            ada()
        }else{
            setda({})
            tabeldata()
        }
        console.log(da);
    }
    const gender = (e) => {
        console.log(e);
        setda({ ...da, current_state: e })
        ada()
        console.log(da);
    }
    return (
        <div>
            <div className='tabel'>
                <div className='box'>
                    <div className='users'>
                        名称
                    </div>
                    <div className='data'><span>{content.chelpcenteroupon_name}</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        优惠券类型
                    </div>
                    <div className='data'><span>{content.coupon_type === '1' ? '注册赠卷' : content.coupon_type === '2' ? '全场赠卷' : content.coupon_type === '3' ? '申贷赠卷' : '会员赠卷'}</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        可使用产品
                    </div>
                    <div className='data'><span>{content.usable_products === '1' ? '全场通用' : content.usable_products === '2' ? "指定产品" : '指定分类'}</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        使用门槛
                    </div>
                    <div className='data'><span>满{content.face_value}元可用</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        面值
                    </div>
                    <div className='data'><span>{content.use_threshold}元</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        状态
                    </div>
                    <div className='data'><span>{content.state === '1' ? '已过期' : '未过期'}</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        有效期
                    </div>
                    <div className='data'><span>{content.term_validity}</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        总发行量
                    </div>
                    <div className='data'><span>{content.total_circulation}张</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        已领取
                    </div>
                    <div className='data'><span>{content.notClaimed}张</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        待领取
                    </div>
                    <div className='data'><span>{content.used}张</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        已使用
                    </div>
                    <div className='data'><span>{content.received}张</span></div>
                </div>
                <div className='box'>
                    <div className='users'>
                        未使用
                    </div>
                    <div className='data'><span>{content.notUsed}张</span></div>
                </div>
            </div>
            <div className="boders">
                <Form
                    layout="inline"
                >
                    <Form.Item className="bg">
                        <span className="text">筛选查询</span>
                    </Form.Item>

                    <Form.Item label="使用状态" className="box22">
                        <Select placeholder="请选择一个状态" onChange={gender} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">未使用</Select.Option>
                            <Select.Option value="2">已经领取</Select.Option>
                            <Select.Option value="3">已使用</Select.Option>
                            <Select.Option value="4">未领取</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="订单编号" className="box22">
                        <Input placeholder="请输入订单编号" onBlur={couponName} />
                    </Form.Item>
                </Form>
            </div>
            <div className="from">
                <div className="bg">
                    <span className="text">数据列表</span>

                    <div className="right">
                        <Select placeholder="请选择排序方式" style={{ width: 150 }} onChange={sort} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">领取时间</Select.Option>
                            <Select.Option value="2">使用时间</Select.Option>
                        </Select>
                    </div>
                </div>

                <Table bordered columns={columns} dataSource={datas} />
            </div>
        </div>
    )

}